<template>
  <div>
    <el-card>
      <el-upload class="upload-demo" :auto-upload="false" :on-change="handleChange" v-model:file-list="fileList">
        <el-button class="ml-3" type="primary" size="large" round style="font-weight: bold;font-size: 18px;" v-if="roleType !== 3">
          选择就业Excel数据
        </el-button>
      </el-upload>
      <el-table :data="computedTableData" style="width: 100%">
        <el-table-column label="入职公司">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.title }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="学生姓名">
          <template #header>
            <el-input v-model="search" placeholder="请输入公司名称" />
          </template>
          <template #default="scope">
            <div style="display: flex; align-items: center">
              {{ scope.row.studentname }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" round @click="handlePreview(scope.row)">面试题</el-button>
            <el-button type="warning" round @click="handleUpdate(scope.row)" v-if="roleType !== 3">更新题库</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog v-model="dialogUpdateVisible" title="更新题库" @close="updateConfirm" style="border-radius: 20px; font-weight: bold;" :center="true" >
      <!-- event接收子组件传回来的值  将父组件的内容传递给子组件-->
      <Editer @event="handleUpdateEditerEvent" :content="currentItem['interview']" v-if="dialogUpdateVisible"></Editer>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogUpdateVisible = false">取消</el-button>
          <el-button type="primary" @click="updateConfirm">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogPreviewVisible" title="预览面试题"  style="border-radius: 20px; font-weight: bold;" :center="true">
      <el-card>
        <div v-html="currentItem.interview"></div>
      </el-card>
    </el-dialog>
  </div>
</template>
<script setup>
import Editer from '../../components/editer/Editer.vue'
import { ref, onMounted, computed } from 'vue'
import ImportExcel from '../../utils/ImportExcel'
import axios from 'axios';
import useUserStore from '../../store/useUserStore';
const {user:{role:{roleType}}} = useUserStore()
const fileList = ref([])
const dialogUpdateVisible = ref(false)
const dialogPreviewVisible = ref(false)
const tableData = ref([])
const search = ref("")
//用于存放table的数据，在对话框中提交给后端
const currentItem = ref({})
const handlePreview = (item) => {
  console.log(currentItem.value);
  console.log('preview',item);
  currentItem.value = item
  dialogPreviewVisible.value = true
}
const computedTableData = computed(() => tableData.value.filter(
  item => item.title.toLowerCase().includes(search.value.toLowerCase())
))
const handleUpdateEditerEvent = (childrenData) => {
//子组件传递的信息
console.log(currentItem.value);
//对象添加值
currentItem.value["interview"] = childrenData
// console.log();
}
const updateConfirm = async () =>{
  dialogUpdateVisible.value = false
  // handleUpdateEditerEvent()
  //点击确认，将信息提交到后端
  await axios.put(`/admin/companies/${currentItem.value._id}`,currentItem.value)
}
const handleUpdate = (item) => {
  dialogUpdateVisible.value = true
  console.log('item面试', item);
  //存放表格的数据，用于提交给后端
  currentItem.value = item
}
const handleChange = (event) => {
  console.log(event.raw);
  ImportExcel(event.raw, async (data) => {
    console.log(data);
    const list = data.map(item => ({ title: item.company }))
    //存储公司数据
    await axios.post("/admin/companies", list)
    //存储就业学生数据
    await axios.post("/admin/companystudents", data)
    setTimeout(() => {
      fileList.value = []
      console.log('1');
    }, 1000)
    getList()
  })
}
const getList = async () => {
  const res = await axios.get('/admin/companies')
  tableData.value = res.data
}
onMounted(() => {
  // console.log(1.5 + 2 + 2 + 2 + 2 + 2);
  getList()
})
</script>
<style scoped lang='scss'>
.el-card {
  // background-color: aqua;
  border-radius: 30px;

  :deep(.el-table .cell) {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
  }
}
</style>